<template>
  <div class="container">
    <div class="boxItem" v-for="(item, index) in data" :key="index">
      <div class="boxItem-count1">{{item.nameOne}}：{{item.valueOne}}</div>
      <div class="boxItem-count2">{{item.nameTwo}}：{{item.valueTwo}}</div>
      <Chart :id="'ZJ_BFB_ONE_S_SM' + index" :cdata="item"/>
      <div class="boxItem-count3">{{item.bfbNameTwo}}</div>
    </div>
  </div>
</template>

<script>
  import Chart from './chart.vue'

  export default {
    data() {
      return {
        data: [
          // {id: 'main1y1', name: '总用电量的', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.8},
          // {id: 'main1yy2', name: '总用电的量发', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.6},
          // {id: 'main1y3', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: '0.5'}
        ],
        drawTiming: null
      }
    },
    components: {
      Chart
    },
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    mounted() {
      this.drawTimingFn()
    },
    beforeDestroy() {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    methods: {
      drawTimingFn () {
        this.queryData();
        this.drawTiming = setInterval(() => {
          this.queryData();
        }, 17000);
      },
      queryData() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          console.log(data, '百分比图一小')
          if (data.status == 200) {
            this.data = data.object.values
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    /*flex-wrap: wrap;*/
    width: 100%;
    height: 100%;
    padding: 10px 10px 10px 10px;

    .boxItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 170px;
      height: 175px;

      .boxItem-count1 {
        position: absolute;
        top: 0;
        height: 21px;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 21px;
      }

      .boxItem-count2 {
        position: absolute;
        top: 21px;
        height: 21px;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 21px;
      }

      .boxItem-count3 {
        position: absolute;
        bottom: 10px;
        height: 18px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
        line-height: 14px;
      }
    }
  }
</style>
